<template>
    <header>
      <div class="l-content">
        <el-button
          type="primary"
          icon="el-icon-s-fold"
          size="mini"
          circle
        ></el-button>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="current.path"
            v-if="current">{{current.label}}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div class="r-content">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </span>
          <template #dropdown>

          <el-dropdown-menu  >
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
        </el-dropdown>
   
      </div>
    </header>
  </template>
  
  <script>
  import { mapState } from "vuex";
  export default {
    computed: {
      ...mapState({
        current: (state) => state.tab.currentMenu,
      }),
    },
  };
  </script>
  
  <style scoped>
  header {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
  }
  
  .l-content {
    display: flex;
    align-items: center;
  }
  .el-button {
    margin-right: 15px;
  }
  </style>
  <style>
  </style>